<template>
  <div>
    <siteHeader :header="header"></siteHeader>
    <el-main>
      <el-row>
        <el-col
          class="border"
          :xs="{span: 24, offset: 0}"
          :sm="{span: 18, offset: 3}"
          :md="{span: 14, offset: 5}"
          :lg="{span: 8, offset: 8}"
          :xl="{span: 8, offset: 8}"
        >
          <el-form
            :model="model"
            :rules="rules"
            ref="rules"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
            @submit.native.prevent="createUser('rules')"
          >
            <el-form-item label="项目负责人" prop="nickName">
              <el-input
                v-model="model.nickName"
                placeholder="请输入真实姓名"
                :maxlength="4"
                clearable
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="userPassword">
              <el-input
                v-model="model.userPassword"
                placeholder="请输入密码"
                clearable
                type="password"
                prefix-icon="el-icon-help"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="acknowledgement">
              <el-input
                v-model="model.acknowledgement"
                placeholder="请确认密码"
                clearable
                type="password"
                prefix-icon="el-icon-help"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="model.phone"
                placeholder="请输入负责人手机号"
                clearable
                prefix-icon="el-icon-phone"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="model.email"
                placeholder="请输入负责人邮箱"
                clearable
                prefix-icon="el-icon-eleme"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="所属老师" prop="teacherBelong">
              <el-input
                v-model="model.teacherBelong"
                placeholder="请输入所属老师"
                clearable
                prefix-icon="el-icon-s-custom"
              ></el-input>
            </el-form-item>-->
            <el-form-item label="所属单位" prop="placeBelong">
              <el-input
                v-model="model.placeBelong"
                placeholder="请输入所属单位"
                clearable
                prefix-icon="el-icon-location"
              ></el-input>
            </el-form-item>

            <el-form-item size="large">
              <el-button type="primary" native-type="submit">创建</el-button>
              <el-button @click="cancelCreate">取消</el-button>
            </el-form-item>
          </el-form>
          <p style="color:red;font-size:14px;">
            *注意：
            项目负责人应为老师，且一位老师只能注册一个账号，新注册账号默认为
            <strong>未激活</strong> 状态，如紧急请致电下方电话，联系
            <strong>管理员</strong> 进行激活。
          </p>
        </el-col>
      </el-row>
    </el-main>
    <siteFooter></siteFooter>
  </div>
</template>

<style lang="scss" scoped>
@import "../../assets/styles/box-border.scss";
</style>>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.model.userPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      header: { menu: "注册账号", toPageName: "去登陆", to: "/login" },
      model: {
        nickName: "",
        userPassword: "",
        acknowledgement: "",
        phone: "",
        email: "",
        // teacherBelong: "",
        placeBelong: "",
        verificationCode: ""
      },
      rules: {
        nickName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]{2,4}$/,
            message: "长度在 2 到 4 个字符的中文",
            trigger: "change"
          }
        ],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^\w{6,20}$/,
            message: " 密码应由6-20个字母、数字、下划线组成",
            trigger: "blur"
          }
        ],
        acknowledgement: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: "请输入正确的手机号，有效手机号为13-18开头",
            trigger: "change"
          }
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur"
          },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: "邮箱格式错误",
            trigger: "blur"
          }
        ],
        // teacherBelong: [
        //   {
        //     required: true,
        //     message: "请输入所属老师",
        //     trigger: "blur"
        //   }
        // ],
        placeBelong: [
          {
            required: true,
            message: "请输入所属单位",
            trigger: "blur"
          },
          {
            pattern: /^[0-9\u4e00-\u9fa5]{2,7}$/,
            message: "只支持数字和中文",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    createUser(rules) {
      this.$refs[rules].validate(valid => {
        if (valid) {
          //初始化用户注册信息
          var userInfo = {};
          userInfo.userName = this.model.nickName;
          userInfo.password = this.model.userPassword;
          userInfo.phone = this.model.phone;
          userInfo.email = this.model.email;
          // userInfo.teacherBelong = this.model.teacherBelong;
          userInfo.placeBelong = this.model.placeBelong;
          //创建注册前先发请求判断是否重复
          this.$http.post("user/phoneNumberIsOk", userInfo).then(res => {
            if (res.data.code == 200) {
              //没有重复的时候才发送创建用户请求
              this.$http.post("user/register", userInfo).then(res => {
                let user = res.data.data;
                this.$message({
                  message: `成功创建用户 ${user}，请登录!`,
                  type: "success"
                });
                this.$router.push("/login");
              });
            } else {
              this.$message({
                message: `手机号被占用，请重选手机号`,
                type: "info"
              });
            }
          });
        } else {
          this.$message({
            message: "信息填写错误，请修改后再创建!",
            type: "info"
          });
        }
      });
    },
    cancelCreate() {
      this.$message({
        message: "已取消创建用户!",
        type: "info",
        center: true
      });
      this.$router.push("/login");
      return;
    }
  }
};
</script>